{% load static %}
<section class="site-slider">
  <div id="siteslider" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
      {% for path in sliders %}
      <button
        type="button"
        data-bs-target="#siteslider"
        data-bs-slide-to="{{ forloop.counter0 }}"
        {% if forloop.first %}
        class="active"
        aria-current="true"
        {% endif %}
        aria-label="Slide {{ forloop.counter }}"
      ></button>
      {% endfor %}
    </div>
    <div class="carousel-inner" role="listbox">
      {% for path in sliders %}
      <div class="carousel-item {% if forloop.first %}active{% endif %}"
           style="background-image: url({% static path %})">
        <div class="overlay"></div>
      </div>
      {% endfor %}
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#siteslider" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#siteslider" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
</section>
